<template>
  <div>
    <h2 v-text="msg"></h2>
    <hr>
    <h3 v-text="count"></h3>
    <h2>我是分割线</h2>
    <p>
      <button @click="add(10)"> ++ </button>
      <button @click="$store.commit('reduce')"> -- </button>
    </p>
    <p>
      <button @click="$store.dispatch('addAction')"> ++ </button>
      <button @click="reduceAction"> -- </button>
    </p>
  </div>
</template>

<script>

import store from '@/vuex/store'
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'Count',
  data () {
    return {
      msg: 'Hello Vuex'
    }
  },
  computed: {
    count () {
      return this.$store.getters.count
    }
  },
  methods: {
    ...mapMutations(['add', 'reduce']),
    ...mapActions(['addAction', 'reduceAction'])
  },
  store
  // methods: mapMutations(['add', 'reduce']),
  // computed: mapState(['count']) 使用数组的方式
  // 或者使用es5 computed: { count(){ return this.$store.state.count}}
}
</script>
